<template>
  <div>
  <mt-swipe :auto="4000">
<!--    在组件中，使用v-for循环的话，一定要使用key-->
<!--    <mt-swipe-item v-for="item in  lunbotuList" :key="item.url"></mt-swipe-item>-->
<!--    <img :src="item.img" alt="">-->
  </mt-swipe>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-home"></span>
        <div class="mui-media-body">Home</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
        <div class="mui-media-body">Email</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-chatbubble"></span>
        <div class="mui-media-body">Chat</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-location"></span>
        <div class="mui-media-body">location</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-search"></span>
        <div class="mui-media-body">Search</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <span class="mui-icon mui-icon-phone"></span>
        <div class="mui-media-body">Phone</div></a></li>
    </ul>
  </div>
</template>

<script>
  import {Toast} from "mint-ui"
    export default {
      data(){
          return{
            lunbotuList:[] //保存轮播图的数组
          }
      },
      //在created调用轮播图
      created(){
         this.getLunbotu();
      },
      methods:{
           getLunbotu(){
             //获取轮播图数据的方法
             this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
               console.log(result.body);
               if (result.body.status === 0){
               //  成功
                 this.lunbotuList=result.body.methods
                 Toast('加载轮播图失败')
               } else {
                 Toast('加载轮播图失败')
               }
             })

           }
      }
    }
</script>

<style scoped>
.mint-swipe{
  height: 200px;
}
 .mint-swipe-item:nth-child(1){
   background: pink;
 }
  .img{
    height: 100%;
    width: 100%;
  }
 .mui-table-view mui-grid-view mui-grid-9{
    background: #ffffff;
    border: none;
  }
.mui-table-view-cell{
  border: 0;
}
</style>
